<template>
  <div
    style="background:#2e3551;width: 100%;height:50px;margin: 0 0 50px 0;padding: 0;"
  >
    <div class="header" style="height: 50px;margin: 0 auto;padding: 0">
      <div class="header_container" style="display: flex;position: relative;">
        <div class="header_left">
          <router-link :to="{ name: 'websiteHome' }" tag="a"></router-link>
          <!-- <img src="http://o6wndwjxn.qnssl.com/283eb201806281543516674.png"
               alt=""
          style="display: block;width: 80px;height:25px; margin: 15px auto 0">-->
        </div>
        <!-- <div class="header_right"
        v-on:click="nav_title()">导航栏</div>-->
        <div
          :style="
            'height:' +
              h +
              'px;width:' +
              w +
              'px;transform: scaleX(' +
              show +
              ');'
          "
          class="mobile_head_yin"
          @click="Close"
        ></div>
        <ul
          class="nav8 nav_mobile_show"
          :style="'transform: scaleX(' + show + ');height:' + h + 'px'"
        >
          <li
            v-for="(item, i) in routeArr"
            :key="i"
            @:click="nav_li_show(i, item.routeName)"
          >
            <router-link :to="{ name: item.mobile_index }">
              {{ item.title }}
              <img
                src="http://o6wndwjxn.qnssl.com/93c48201808301048006782.png"
                alt
                :style="
                  'transform: rotate(' +
                    item.rotate +
                    ');display:' +
                    item.display +
                    ';'
                "
              />
            </router-link>
            <!-- <div style=" width: 100%;transform-origin: 0 0;"
                 v-show="item.show"
                 v-on:click="nav_li_a_show(i)">
              <router-link :class="{active: item.mobile_text==$route.name}"
                           :to="{name:item.routeName}"
                           style="font-size: 14px;color: white;display: block;line-height: 30px;"
                           tag="a">{{item.mobile_title}}</router-link>
              <router-link :class="{active: item.routeName==$route.name}"
                           :to="{name:item.routeName}"
                           style="font-size: 14px;color: white;display: block;line-height: 30px;"
                           tag="a">{{item.gong}}</router-link>
              <router-link :class="{active: item.xiaochengxu==$route.name}"
                           :to="{name:item.xiaochengxu}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px;"
                           tag="a">{{item.xiao}}</router-link>
              <router-link :class="{active: item.knowledge==$route.name}"
                           :to="{name:item.knowledge}"
                           style="font-size: 14px;color: white;display: block;line-height: 30px;"
                           tag="a">{{item.knowledgeTitle}}</router-link>
              <router-link :class="{active: item.huzhuan==$route.name}"
                           :to="{name:item.huzhuan}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px"
                           tag="a">{{item.wei}}</router-link>
              <router-link :to="{}"
                           exact
                           style="font-size: 12px;color: white;display: block;line-height: 30px"
                           tag="a"><a @click="tiao()"
                   style="font-size: 14px;color: white;display: block;line-height: 30px">{{item.meng}}</a></router-link>
              <router-link :to="{}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px"
                           tag="a"><a @click="tiaoone()"
                   style="font-size: 14px;color: white;display: block;line-height: 30px">{{item.zhong}}</a></router-link>
              <router-link :class="{active: item.weixin==$route.name}"
                           :to="{name:item.weixin}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px"
                           tag="a">{{item.tong}}</router-link>
              <router-link :class="{active: item.yunying==$route.name}"
                           :to="{name:item.yunying}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px"
                           tag="a"
                           >{{item.yun}}</router-link>
              <router-link :to="{}"
                           exact
                           style="font-size: 12px;color: white;display: block;line-height: 30px"
                           tag="a"><a @click="music()"
                   style="font-size: 14px;color: white;display: block;line-height: 30px">{{item.music}}</a></router-link>
              <router-link :to="{}"
                           exact
                           style="font-size: 14px;color: white;display: block;line-height: 30px"
                           tag="a"><a @click="video()"
                   style="font-size: 14px;color: white;display: block;line-height: 30px">{{item.video}}</a></router-link>
            </div>-->
          </li>
        </ul>
      </div>
    </div>
    <div v-show="mobvideo" class="New_video" @click="video">
      <img src="http://o6wndwjxn.qnssl.com/b528a201809201534102972.jpg" alt />
    </div>
  </div>
</template>

<script>
export default {
  name: "HeadMobile",
  data() {
    return {
      mobvideo: false,
      show: 0,
      h:
        window.innerHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight,
      w:
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth,
      activeIndex: "1",
      isSelect: "",
      mobileSlide: false,
      routeArr: [
        {
          title: "首页",
          routeName: "websiteHome",
          xiaochengxu: "wenzhang",
          mobile_index: "websiteHome",
          weixin: "zixun",
          show: false,
          rotate: 0,
          display: "none"
        }
      ]
    };
  },
  mounted() {
    if (this.h <= 568) {
      this.h = 640;
    }
  },
  methods: {
    tiao() {
      if (this.$route.name === "guanggao") {
        window.scrollTo(0, 2250);
      }
    },
    tiao2() {
      if (this.$route.name === "guanggao") {
        window.scrollTo(0, 2550);
      }
    },
    // tiao () {
    //   window.open('http://jiameng.ztwl1111.com')
    // },
    tiaoone() {
      window.open("http://hrb.weiyouquan.com.cn");
    },
    nav_title() {
      if (this.show === 0) {
        this.show = 1;
      } else {
        this.show = 0;
      }
    },
    Close() {
      this.show = 0;
    },

    nav_li_show(e, name) {
      if (name === "websiteHome" || name === "anli") {
        for (let i = 0; i < this.routeArr.length; i++) {
          this.routeArr[i].rotate = "0deg";
          this.routeArr[i].show = false;
          this.show = 0;
        }
      } else {
        if (this.routeArr[e].show === true) {
          this.routeArr[e].rotate = "0deg";
          this.routeArr[e].show = false;
        } else {
          for (let i = 0; i < this.routeArr.length; i++) {
            this.routeArr[i].rotate = "0deg";
            this.routeArr[i].show = false;
            this.routeArr[e].rotate = "180deg";
            this.routeArr[e].show = true;
          }
        }
      }
    },
    nav_li_a_show() {
      this.show = 0;
      event.stopPropagation();
    },
    music() {
      window.open(
        "https://a.scene.eqh5.cn/s/GO1IKi57?&share_level=1&from_user=371c4885-382f-4b92-8af9-52c618705e7a&from_id=bb31d253-18f9-4bad-bdbe-d804a8be562d&share_time=1537338985003"
      );
    },
    video() {
      this.mobvideo = !this.mobvideo;
    }
  }
};
</script>

<style scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  background: rgb(46, 53, 81);
  z-index: 999;
}
.header_left {
  height: 50px;
  margin: 0 15px;
  position: relative;
}
.header_left > a {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
}
/*  1a1a1a  */
.nav_mobile_show {
  transform-origin: 100% 0;
  transition: all 0.35s;
}

.nav8 {
  position: fixed;
  list-style: none;
  padding: 0;
  width: 200px;
  right: 0;
  top: 0;
  background: #1a1a1a;
  z-index: 99999999999999999999 !important;
  /*border-radius: 5px;*/
  margin: 0;
  /*display: none;*/
}
.mobile_head_yin {
  position: fixed;
  z-index: 99;
  background: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
}

.nav8 li {
  position: relative;
  font-family: STHeitiSC-Light;
  text-align: left !important;
  padding-left: 10%;
  padding-top: 5%;
  padding-bottom: 5%;
  border-bottom: 1px solid #333333;
}
.nav8 li > a {
  position: relative;
  display: block;
  height: 30px;
  line-height: 30px;
}

.nav8 li a img {
  position: absolute;
  right: 15px;
  top: 12px;
  width: 14px;
  height: 6px;
}
.nav8 li a {
  display: block;
  color: white;
  list-style: none;
  text-decoration: none;
}
.nav8 li .active {
  color: #0ed0fd !important;
}
.header_right {
  height: 50px;
  line-height: 50px;
  color: white;
  position: absolute;
  top: 0;
  right: 15px;
  padding: 0 15px;
}
.New_video {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}
.New_video > img {
  width: 90%;
  margin: 0 5%;
  margin-top: 10%;
}
</style>
